<template>
  <view class="custom-statistics-page">
    <!-- 状态栏 -->
    <view class="status-bar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
    
    <!-- 头部 -->
    <view class="header">
      <view class="header-content">
        <view class="back-btn" @click="goBack">
          <text class="back-icon">←</text>
        </view>
        <text class="title">自定义统计</text>
        <view class="header-actions">
          <view class="action-btn" @click="exportData">
            <text class="action-text">导出</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 时间选择 -->
    <view class="time-selector">
      <view class="time-tabs">
        <view 
          class="time-tab" 
          :class="{ active: currentTimeType === 'custom' }"
          @click="setTimeType('custom')"
        >
          <text>自定义</text>
        </view>
        <view 
          class="time-tab" 
          :class="{ active: currentTimeType === 'quick' }"
          @click="setTimeType('quick')"
        >
          <text>快捷选择</text>
        </view>
      </view>
      
      <!-- 自定义时间 -->
      <view class="custom-time" v-if="currentTimeType === 'custom'">
        <view class="date-picker">
          <picker 
            mode="date" 
            :value="startDate" 
            @change="onStartDateChange"
          >
            <view class="date-input">
              <text class="date-text">{{ startDate || '开始日期' }}</text>
            </view>
          </picker>
          <text class="date-separator">-</text>
          <picker 
            mode="date" 
            :value="endDate" 
            @change="onEndDateChange"
          >
            <view class="date-input">
              <text class="date-text">{{ endDate || '结束日期' }}</text>
            </view>
          </picker>
        </view>
      </view>
      
      <!-- 快捷选择 -->
      <view class="quick-time" v-if="currentTimeType === 'quick'">
        <view class="quick-tabs">
          <view 
            class="quick-tab" 
            :class="{ active: quickTime === 'today' }"
            @click="setQuickTime('today')"
          >
            <text>今天</text>
          </view>
          <view 
            class="quick-tab" 
            :class="{ active: quickTime === 'yesterday' }"
            @click="setQuickTime('yesterday')"
          >
            <text>昨天</text>
          </view>
          <view 
            class="quick-tab" 
            :class="{ active: quickTime === 'week' }"
            @click="setQuickTime('week')"
          >
            <text>本周</text>
          </view>
          <view 
            class="quick-tab" 
            :class="{ active: quickTime === 'month' }"
            @click="setQuickTime('month')"
          >
            <text>本月</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 统计类型选择 -->
    <view class="statistics-types">
      <text class="section-title">统计类型</text>
      <view class="type-grid">
        <view 
          class="type-item" 
          v-for="type in statisticsTypes" 
          :key="type.id"
          :class="{ active: selectedTypes.includes(type.id) }"
          @click="toggleType(type.id)"
        >
          <text class="type-icon">{{ type.icon }}</text>
          <text class="type-name">{{ type.name }}</text>
        </view>
      </view>
    </view>

    <!-- 统计结果 -->
    <view class="statistics-results" v-if="selectedTypes.length > 0">
      <text class="section-title">统计结果</text>
      
      <!-- 概览数据 -->
      <view class="overview-section">
        <view class="overview-item" v-if="selectedTypes.includes('orders')">
          <text class="overview-number">{{ statisticsData.totalOrders }}</text>
          <text class="overview-label">总订单数</text>
        </view>
        <view class="overview-item" v-if="selectedTypes.includes('revenue')">
          <text class="overview-number">¥{{ statisticsData.totalRevenue }}</text>
          <text class="overview-label">总收入</text>
        </view>
        <view class="overview-item" v-if="selectedTypes.includes('customers')">
          <text class="overview-number">{{ statisticsData.totalCustomers }}</text>
          <text class="overview-label">服务客户</text>
        </view>
        <view class="overview-item" v-if="selectedTypes.includes('rating')">
          <text class="overview-number">{{ statisticsData.averageRating }}</text>
          <text class="overview-label">平均评分</text>
        </view>
      </view>
      
      <!-- 图表区域 -->
      <view class="charts-section">
        <view class="chart-item" v-if="selectedTypes.includes('orders')">
          <text class="chart-title">订单趋势</text>
          <view class="chart-placeholder">
            <text class="chart-text">📊 订单趋势图表</text>
          </view>
        </view>
        
        <view class="chart-item" v-if="selectedTypes.includes('revenue')">
          <text class="chart-title">收入趋势</text>
          <view class="chart-placeholder">
            <text class="chart-text">💰 收入趋势图表</text>
          </view>
        </view>
        
        <view class="chart-item" v-if="selectedTypes.includes('services')">
          <text class="chart-title">服务类型分布</text>
          <view class="chart-placeholder">
            <text class="chart-text">🥧 服务类型饼图</text>
          </view>
        </view>
      </view>
      
      <!-- 详细数据 -->
      <view class="details-section">
        <text class="section-title">详细数据</text>
        
        <view class="detail-table" v-if="selectedTypes.includes('orders')">
          <view class="table-header">
            <text class="table-cell">日期</text>
            <text class="table-cell">订单数</text>
            <text class="table-cell">收入</text>
          </view>
          <view 
            class="table-row" 
            v-for="item in statisticsData.dailyData" 
            :key="item.date"
          >
            <text class="table-cell">{{ item.date }}</text>
            <text class="table-cell">{{ item.orders }}</text>
            <text class="table-cell">¥{{ item.revenue }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 查询按钮 -->
    <view class="query-section">
      <view class="query-btn" @click="queryStatistics">
        <text class="query-text">查询统计</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      currentTimeType: 'custom',
      quickTime: 'today',
      startDate: '',
      endDate: '',
      selectedTypes: ['orders', 'revenue'],
      statisticsTypes: [
        { id: 'orders', name: '订单统计', icon: '📋' },
        { id: 'revenue', name: '收入统计', icon: '💰' },
        { id: 'customers', name: '客户统计', icon: '👥' },
        { id: 'rating', name: '评分统计', icon: '⭐' },
        { id: 'services', name: '服务统计', icon: '🔧' },
        { id: 'coupons', name: '优惠券统计', icon: '🎫' }
      ],
      statisticsData: {
        totalOrders: 156,
        totalRevenue: '12,580.00',
        totalCustomers: 89,
        averageRating: '4.6',
        dailyData: [
          { date: '03-15', orders: 8, revenue: '1,280.00' },
          { date: '03-14', orders: 12, revenue: '1,890.00' },
          { date: '03-13', orders: 6, revenue: '980.00' },
          { date: '03-12', orders: 15, revenue: '2,340.00' },
          { date: '03-11', orders: 9, revenue: '1,450.00' }
        ]
      }
    }
  },
  onLoad() {
    this.getStatusBarHeight();
    this.initDefaultTime();
  },
  methods: {
    getStatusBarHeight() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 0;
    },
    
    initDefaultTime() {
      const today = new Date();
      const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
      
      this.startDate = this.formatDate(yesterday);
      this.endDate = this.formatDate(today);
    },
    
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    setTimeType(type) {
      this.currentTimeType = type;
    },
    
    setQuickTime(time) {
      this.quickTime = time;
      const now = new Date();
      let startDate, endDate;
      
      switch (time) {
        case 'today':
          startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
          endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
          break;
        case 'yesterday':
          startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
          endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
          break;
        case 'week':
          const dayOfWeek = now.getDay();
          startDate = new Date(now.getTime() - (dayOfWeek - 1) * 24 * 60 * 60 * 1000);
          startDate.setHours(0, 0, 0, 0);
          endDate = new Date(startDate.getTime() + 7 * 24 * 60 * 60 * 1000);
          break;
        case 'month':
          startDate = new Date(now.getFullYear(), now.getMonth(), 1);
          endDate = new Date(now.getFullYear(), now.getMonth() + 1, 1);
          break;
      }
      
      this.startDate = this.formatDate(startDate);
      this.endDate = this.formatDate(endDate);
    },
    
    onStartDateChange(e) {
      this.startDate = e.detail.value;
    },
    
    onEndDateChange(e) {
      this.endDate = e.detail.value;
    },
    
    toggleType(typeId) {
      const index = this.selectedTypes.indexOf(typeId);
      if (index > -1) {
        this.selectedTypes.splice(index, 1);
      } else {
        this.selectedTypes.push(typeId);
      }
    },
    
    queryStatistics() {
      if (this.selectedTypes.length === 0) {
        uni.showToast({
          title: '请选择统计类型',
          icon: 'none'
        });
        return;
      }
      
      if (!this.startDate || !this.endDate) {
        uni.showToast({
          title: '请选择时间范围',
          icon: 'none'
        });
        return;
      }
      
      if (new Date(this.startDate) > new Date(this.endDate)) {
        uni.showToast({
          title: '开始日期不能晚于结束日期',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '查询中...'
      });
      
      // TODO: 调用后端API查询统计数据
      // this.$api.getCustomStatistics({
      //   startDate: this.startDate,
      //   endDate: this.endDate,
      //   types: this.selectedTypes
      // }).then(res => {
      //   uni.hideLoading();
      //   this.statisticsData = res.data;
      // }).catch(err => {
      //   uni.hideLoading();
      //   uni.showToast({
      //     title: '查询失败',
      //     icon: 'none'
      //   });
      // });
      
      // 模拟API调用
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '查询成功',
          icon: 'success'
        });
      }, 1000);
    },
    
    exportData() {
      if (this.selectedTypes.length === 0) {
        uni.showToast({
          title: '请先选择统计类型',
          icon: 'none'
        });
        return;
      }
      
      uni.showModal({
        title: '导出数据',
        content: '确定要导出统计数据吗？',
        success: (res) => {
          if (res.confirm) {
            // TODO: 调用导出API
            uni.showToast({
              title: '导出功能开发中',
              icon: 'none'
            });
          }
        }
      });
    },
    
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style scoped>
.custom-statistics-page {
  min-height: 100vh;
  background-color: #F5F5F5;
}

.status-bar {
  background-color: #007AFF;
}

.header {
  background-color: #007AFF;
  padding: 20rpx 30rpx;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.title {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.header-actions {
  width: 60rpx;
  display: flex;
  justify-content: flex-end;
}

.action-btn {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
}

.action-text {
  color: white;
  font-size: 28rpx;
}

.time-selector {
  background-color: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.time-tabs {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.time-tab {
  padding: 15rpx 30rpx;
  background-color: #F5F5F5;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #666;
}

.time-tab.active {
  background-color: #007AFF;
  color: white;
}

.custom-time {
  margin-top: 20rpx;
}

.date-picker {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.date-input {
  flex: 1;
  height: 80rpx;
  background-color: #F5F5F5;
  border-radius: 10rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
}

.date-text {
  font-size: 28rpx;
  color: #333;
}

.date-separator {
  font-size: 28rpx;
  color: #999;
}

.quick-time {
  margin-top: 20rpx;
}

.quick-tabs {
  display: flex;
  gap: 15rpx;
  flex-wrap: wrap;
}

.quick-tab {
  padding: 12rpx 24rpx;
  background-color: #F5F5F5;
  border-radius: 25rpx;
  font-size: 26rpx;
  color: #666;
}

.quick-tab.active {
  background-color: #007AFF;
  color: white;
}

.statistics-types {
  background-color: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.type-item {
  width: calc(33.333% - 14rpx);
  background-color: #F5F5F5;
  border-radius: 15rpx;
  padding: 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.type-item.active {
  background-color: #E6F7FF;
  border: 2rpx solid #007AFF;
}

.type-icon {
  font-size: 32rpx;
}

.type-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.statistics-results {
  background-color: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.overview-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.overview-item {
  width: calc(50% - 10rpx);
  background-color: #F8F9FA;
  border-radius: 15rpx;
  padding: 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.overview-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #007AFF;
}

.overview-label {
  font-size: 24rpx;
  color: #666;
}

.charts-section {
  margin-bottom: 30rpx;
}

.chart-item {
  margin-bottom: 20rpx;
}

.chart-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.chart-placeholder {
  height: 200rpx;
  background-color: #F8F9FA;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-text {
  font-size: 24rpx;
  color: #999;
}

.details-section {
  margin-top: 30rpx;
}

.detail-table {
  background-color: #F8F9FA;
  border-radius: 15rpx;
  overflow: hidden;
}

.table-header {
  display: flex;
  background-color: #E9ECEF;
  padding: 20rpx;
}

.table-row {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #E9ECEF;
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  flex: 1;
  font-size: 26rpx;
  color: #333;
  text-align: center;
}

.query-section {
  padding: 30rpx;
}

.query-btn {
  background-color: #007AFF;
  color: white;
  padding: 30rpx;
  border-radius: 25rpx;
  text-align: center;
}

.query-text {
  font-size: 32rpx;
  font-weight: bold;
}
</style>

















